
<!DOCTYPE HTML PUBLIC "-//W3C//DTD -//W3C//DTD HTML 4.01//EN//EN" "">
<%@page import="com.tecnick.htmlutils.htmlentities.HTMLEntities"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@ page contentType="text/html; charset=utf-8" %>
<%@page import="controller.Controller"%>
<%@ page import="java.util.*,dataBase.*"%>
<%@page import="com.google.appengine.api.datastore.Key"%>
<%@page import="sessionMenegment.SessionMgr"%>
<%@page import="language.LangFactory"%>
<%@page import="language.LangIntrf"%>

<%
	SessionMgr sessionMgr = SessionMgr.getInst();
	boolean user = sessionMgr.checkUser(request,session);
	if(!user)
		response.sendRedirect("home.jsp");
%>
<%
	LangFactory langFactory= new LangFactory();
	String langName = request.getParameter("lang");
	LangIntrf lang =null;
	if(langName!=null){
		lang = langFactory.getLang(request.getParameter("lang"));
		session.setAttribute("lang",langName);
	}
	else
		lang = langFactory.getLang((String)session.getAttribute("lang"));
	String langSign = lang.getLang();
	
	
%>
<html>

	<head>
		<link rel="icon" href="../images/synca.png" type="image/x-icon"/> 
		<link rel="shortcut icon" href="../images/synca.png" type="image/x-icon"/>
		<link href="../style.css" rel="stylesheet" type="text/css" />
		<link href="../e.css" rel="stylesheet" type="text/css" />
		<link href="../css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
		<link href="../try3.css" rel="stylesheet" type="text/css" />
<link href="http://dl.dropbox.com/u/22035932/jPicker-1.1.6.min.css" type="text/css"  rel="stylesheet" />
<link href="http://dl.dropbox.com/u/22035932/jPicker.css" type="text/css" rel="stylesheet" />
        <% 
        	
    	Controller controller2 = Controller.getInstance();
    	Business business2 =  controller2.getBiz((String)session.getAttribute("userNameBusiness"));
    	if(business2==null){
    		response.sendRedirect("home.jsp");
    	}
    	String border = business2.getBorderColor();
    	String background = business2.getBackground();
    	String messageBG = business2.getSecBackground();
         	
        	if (border!=null && background!=null && messageBG!=null ){
        %>
        
        <style type="text/css">
        	.formButton2{
        		border:solid 2px <%=border%>;
        		background-color: <%=messageBG%>;
        		color:#000;
        	}
        	<!-----  style.css  ----->
        	body {
        		background-color: <%=background%>;
        	}
        	#container {
        		background-color: <%=background%>;
        	}
        	#header {
        		background-color: <%=messageBG%>;
        		border-bottom: solid 2px <%=border%>;
        	}
        	#headerLogedIn{
        		background-color: <%=messageBG%>;
        		border-bottom: solid 2px <%=border%>;
        	}
        	#headerLogedIn #logo{
        		color: <%=background%>;
        	}
        	.menu_nav li,.menu_nav_logedIn li {
        		background-color: <%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	#left_sidebar {
        		background-color: <%=background%>;
        	}
        	#left_sidebar button{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	
        	.control_bar {
        		background-color: <%=background%>;
        	}
        	#main_content{
        		background-color: <%=background%>;
        	}
        	#footer {
        		background-color: <%=messageBG%>;
        		border-top: solid 2px <%=border%>;
        	}
        	#stylized .formButton{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	#stylized{
        		background:<%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	#messageBox{
        		background-color: <%=background%>;
        		border: solid 2px <%=border%>;
        		
        	}
        	#messageBox button{
        		color:<%=background%>;
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	.menu_nav {
        		background-color:<%=messageBG%>;
        	}
        	.menu_nav_logedIn {
        		background-color:<%=messageBG%>;
        	}
        	.side_buttons li {
        		background-color: <%=messageBG%>;
        		border:solid 2px <%=border%>;
        	}
        	.list{
        		border: solid 2px <%=messageBG%>;
        	}
        	#left_sidebar form{
        		border:solid 2px <%=border%>;
        	}
        	.list{
        		border: solid 2px <%=border%>;
        	}
        	
        	
        	/*-----  e.css  -----*/
        	
        	
        	.statusChange{
        		background-color: <%=background%>;
        		border:solid 2px <%=border%>;
        	}
        	.heading {
        		background-color:<%=messageBG%>;
        	}
        	.wraper {
        		background-color:<%=messageBG%>;
        		border-color: <%=border%>;
        	}
        	.content {
        		background-color:<%=messageBG%>;
        	}
        	.currentStatus {
        		border:solid 2px <%=border%>;
        	}
        	
        </style>
        <%} %>
        <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
        
        <script type="text/javascript" src="../jquery.tools.min.js"></script>
        
		        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"></script>
		
        <script type="text/javascript" src="../jquery.address-1.4.min.js"></script>
        
        <script src="../javascript/jpicker-1.1.6.min.js" type="text/javascript"></script>
     
		<title>Synca</title>
		 <%
		 	Controller controller = Controller.getInstance();
		 	String bizName = (String)session.getAttribute("userNameBusiness");
		 	Business business = controller.getBiz(bizName);
		 %>
		<%
			String dateFrom = request.getParameter("dateFrom");
			DateFormat df = new SimpleDateFormat("dd-MM-yyyy");
			String dateTo = request.getParameter("dateTo");
			Date from = null;
			Date to = null;
			if (dateFrom!=null && dateTo!=null){
				from = df.parse(dateFrom);
				to = df.parse(dateTo);
			}
			if (from==null){
				from = new Date();
				from.setTime(0);
			}
			if (to==null)
				to = new Date();
			System.out.println("^^^^^^^^^^^^^^^^^   " + from + "   "+ to);
		%> 
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    	<script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
    	  <%    	  
    	  HashMap<String, Integer> statusHash = controller.getStatusHash((String) session.getAttribute("userNameBusiness"), from, to);
    	  Set<String> statuses = statusHash.keySet();
    	  boolean first = true;
    	  %>

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Status');
        data.addColumn('number', 'Number of Orders');
        data.addRows([
          <% for (String status: statuses)  { 
          
          	if (first) {
          		  first = false;%>
        	  	  ['<%=HTMLEntities.unhtmlentities(status) %>', <%=statusHash.get(status)%>]
            <%} else {%>
            	  ,['<%=HTMLEntities.unhtmlentities(status) %>', <%=statusHash.get(status)%>]
          	<%}%>
                    
          <%}%>
        ]);

        // Set chart options
        var options = {'title':'',
                       'width':400,
                       'height':300,
                       'backgroundColor': '<%=background%>'};

        // Instantiate and draw our chart, passing in some options.
        <%for (int i=1;i<3;i++){%>
        var chart_<%=i%> = new google.visualization.PieChart(document.getElementById('chart_div_<%=i%>'));
        chart_<%=i%>.draw(data, options);
		<%}%>
      }
    </script>
    
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
    	  <%    	  
			dateFrom = request.getParameter("dateFrom");
			df = new SimpleDateFormat("dd-MM-yyyy");
			dateTo = request.getParameter("dateTo");
			from = null;
			to = null;
			if (dateFrom!=null && dateTo!=null){
				from = df.parse(dateFrom);
				to = df.parse(dateTo);
			}
			if (from==null){
				from = new Date();
				from.setTime(0);
			}
			if (to==null)
				to = new Date();
			
			System.out.println("^^^^^^^^^^^^^^^^^   " + from + "   "+ to);
			
    	  //ArrayList<LinkedHashMap<String,Double>> statusTimes = controller.timesStatistic((String) session.getAttribute("userNameBusiness"), new Date(2012,1,1), new Date());
    	  ArrayList<LinkedHashMap<String,Double>> statusTimes = controller.timesStatistic((String) session.getAttribute("userNameBusiness"), from, to);
    	  LinkedHashMap<String,Double> generalAvg = statusTimes.remove(0);
    	  Set<String> statusesTimes = generalAvg.keySet();
    	  boolean firstTimes = true;
    	  
    	  %>
        var data = new google.visualization.DataTable();
        data.addColumn('string', '<%=lang.getSTATUS_STATISTIC_LABEL()%>');
        data.addColumn('string', '<%=lang.getAVG_TIME_BUTTON()%>');
        data.addRows([
            <%
            HashMap<String, Double> dateFormat = new HashMap<String, Double>();

            for (String status: statuses)  {
                dateFormat.put("Days", 0.0);
                dateFormat.put("Hours", 0.0);
                dateFormat.put("Minutes", 0.0);
            	Double timeForStatus = generalAvg.get(status);
            	//translate to minuts
            	timeForStatus/=(1000*60);
            	if (timeForStatus>=60){
            		timeForStatus/=60;
            		if (timeForStatus>=24){
                		timeForStatus/=24;
                		dateFormat.put("Days", (double)timeForStatus.intValue());
                		timeForStatus=timeForStatus*24 - timeForStatus.intValue()*24;
            		}
            		dateFormat.put("Hours", (double)timeForStatus.intValue());
            		timeForStatus=timeForStatus*60 - timeForStatus.intValue()*60;
            	}
            	dateFormat.put("Minutes", (double)timeForStatus.intValue());
        		timeForStatus=timeForStatus*60 - timeForStatus.intValue()*60;
        		System.out.println("^^^^^^^^^888888888^^^^^^^^   " + dateFormat);
        		String time = dateFormat.get("Days").intValue()+"  "+lang.getDAYS_LABEL()+"  "+dateFormat.get("Hours").intValue()+"  "+lang.getHOURS_LABEL()+"  "+dateFormat.get("Minutes").intValue()+"  "+lang.getMINUTES_LABEL();
              	if (firstTimes) {
              		firstTimes = false;%>
            	  		['<%=HTMLEntities.unhtmlentities(status)%>',  '<%=time%>']
        			<%} else {%>	  
        				,['<%=HTMLEntities.unhtmlentities(status)%>',  '<%=time%>']
        			<%}%>
        		<%}%>
        ]);  
        <%for (int i=1;i<3;i++){%>
        var table_<%=i%> = new google.visualization.Table(document.getElementById('table_div_<%=i%>'));
        table_<%=i%>.draw(data, {showRowNumber: true});
        <%}%>
      }
    </script>
    <%
		int j = 1;
		for(String status : statuses){%>
      <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawColumnChart);
      function drawColumnChart() {
    	  <%    	  
			dateFrom = request.getParameter("dateFrom");
			df = new SimpleDateFormat("dd-MM-yyyy");
			
			dateTo = request.getParameter("dateTo");
			from = null;
			to = null;
			if (dateFrom!=null && dateTo!=null){
				from = df.parse(dateFrom);
				to = df.parse(dateTo);
			}
			if (from==null){
				from = new Date();
				from.setTime(0);
			}
			if (to==null)
				to = new Date();
			
			System.out.println("^^^^^^^^^^^^^^^^^   " + from + "   "+ to);
			firstTimes = true;
			//if (st)
			LinkedHashMap<String,Double> currentStatus = statusTimes.remove(0);
  	  //ArrayList<LinkedHashMap<String,Double>> statusTimes = controller.timesStatistic((String) session.getAttribute("userNameBusiness"), new Date(2012,1,1), new Date());
  	  //ArrayList<LinkedHashMap<String,Double>> statusTimes = controller.timesStatistic((String) session.getAttribute("userNameBusiness"), from, to);
  	  
		%>

        var data_<%=j%> = google.visualization.arrayToDataTable([
          ['mounth', '<%=lang.getAVERAGE_TIME_MINUTES_STATISTIC_LABEL()%>'],
          <%
          for (Integer i=1; i<=12; i++){ 
          	//translate to minuts
            	if (firstTimes) {
            		firstTimes = false;%>
          	  		['<%=i.toString()%>',  <%=currentStatus.get(i.toString())/(1000*60)%>]
      			<%} else {%>	  
      				,['<%=i.toString()%>',  <%=currentStatus.get(i.toString())/(1000*60)%>]
      			<%}%>
      		<%}%>
      ]);  
        var options_<%=j%> = {
          title: '<%=HTMLEntities.unhtmlentities(status)%>',
          hAxis: {title: '<%=lang.getMONTH_STATISTIC_LABEL()%>', titleTextStyle: {color: 'red'}}
        };

        var chart_<%=j%> = new google.visualization.ColumnChart(document.getElementById('columnChart_div_<%=j%>'));
        chart_<%=j%>.draw(data_<%=j%>, options_<%=j%>);
      }
    </script>
    <%j++;
		}%>
		
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawTwoColumnChart);
      
      function drawTwoColumnChart() {
    	  var twoColumnData = google.visualization.arrayToDataTable([
          
          ['Day', '<%=lang.getOPEN_ORDERS_STATISTIC_LABEL()%>', '<%=lang.getCLOSED_ORDERS_STATISTIC_LABEL()%>'],
          <%
          ArrayList<HashMap<String, Integer>> totalOrders = controller.getTotalOrders((String) session.getAttribute("userNameBusiness"), from, to);
          HashMap<String, Integer> openOrders = totalOrders.get(0);
          HashMap<String, Integer> closeOrders = totalOrders.get(1);
          Set<String> days = openOrders.keySet();
		  firstTimes = true;
          for (String day:days){ 
            	//translate to minuts
            	System.out.println("!! "+day+"  @@  "+openOrders.get(day) + "  ###  "+closeOrders.get(day));
              	if (firstTimes) {
              		firstTimes = false;%>
            	  		['<%=lang.getDayInWeek(day)%>',  <%=openOrders.get(day)%>, <%=closeOrders.get(day)%>]
        			<%} else {%>	  
        			,['<%=lang.getDayInWeek(day)%>',  <%=openOrders.get(day)%>, <%=closeOrders.get(day)%>]
        			<%}%>
        		<%}%>

      ]);  
        var twoColumnOptions = {
          title: '<%=lang.getNUM_OF_ORDERS_STATISTIC_LABEL()%>',
          hAxis: {title: '<%=lang.getDAY_IN_WEEK_STATISTIC_LABEL()%>', titleTextStyle: {color: 'red'}}
        };
		<%for (int i=1;i<3;i++){%>
        var twoColumnChart_<%=i%> = new google.visualization.ColumnChart(document.getElementById('twoColumnChart_div_<%=i%>'));
        twoColumnChart_<%=i%>.draw(twoColumnData, twoColumnOptions);
        <%}%>
      }
    </script>

	<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawTwoColumnPriorityChart);
      
      function drawTwoColumnPriorityChart() {
    	  var twoColumnPriorityData = google.visualization.arrayToDataTable([
          
          ['Priority', '<%=lang.getON_TIME_STATISTIC_LABEL()%>', '<%=lang.getDELAY_STATISTIC_LABEL()%>'],
          <%
          openOrders = controller.getTotalOrdersByPriority(business, from, to);
          //HashMap<String, Integer> closeOrders = totalOrders.get(1);
          ArrayList<String> Priority = new ArrayList<String>();
          
          Priority.add(lang.getLOW_PRIORITY_STATISTIC_LABEL());
          Priority.add(lang.getMEDIUM_PRIORITY_STATISTIC_LABEL());
          Priority.add(lang.getHIGH_PRIORITY_STATISTIC_LABEL());
          
		  firstTimes = true;
          for (Integer i=0;i<3; i++){ 
            	//translate to minuts
              	if (firstTimes) {
              		firstTimes = false;
              		
              		%>
            	  		['<%=Priority.get(i)%>',  <%=openOrders.get(i.toString())%>, <%=openOrders.get("delayed"+i)%>]
        			<%} else {%>	  
        			,['<%=Priority.get(i)%>',  <%=openOrders.get(i.toString())%>, <%=openOrders.get("delayed"+i)%>]
        			<%}%>
        		<%}%>

      ]);  
        var twoColumnPriorityOptions = {
          title: '<%=lang.getNUM_OF_ORDERS_STATISTIC_LABEL()%>',
          hAxis: {title: '<%=lang.getPRIORITY_STATISTIC_LABEL()%>', titleTextStyle: {color: 'red'}}
        };
		<%for (int i=1;i<3;i++){%>
        var twoColumnPriorityChart_<%=i%> = new google.visualization.ColumnChart(document.getElementById('twoColumnPriorityChart_div_<%=i%>'));
        twoColumnPriorityChart_<%=i%>.draw(twoColumnPriorityData, twoColumnPriorityOptions);
        <%}%>
      }
    </script>


        <script>
			jQuery(document).ready(
				function() {
					var dates = $("#dateChooserFrom, #dateChooserTo").datepicker({
						defaultDate: "+1w",
						changeMonth: true,
						numberOfMonths: 1,
						onSelect: function( selectedDate ) {
							var option = this.id == "dateChooserFrom" ? "minDate" : "maxDate",
								instance = $( this ).data( "datepicker" ),
								date = $.datepicker.parseDate(
									instance.settings.dateFormat ||
									$.datepicker._defaults.dateFormat,
									selectedDate, instance.settings );
							dates.not( this ).datepicker( "option", option, date );
							
						}
					});
					$("#search_1").click(function (){
						
						var fromDay = $("#dateChooserFrom").datepicker("getDate").getDate();
						var fromMonth = $("#dateChooserFrom").datepicker("getDate").getMonth();
						var fromYear = $("#dateChooserFrom").datepicker("getDate").getFullYear();
						var toDay = $("#dateChooserTo").datepicker("getDate").getDate();
						var toMonth = $("#dateChooserTo").datepicker("getDate").getMonth();
						var toYear = $("#dateChooserTo").datepicker("getDate").getFullYear();
						
						window.location.href = "statistics.jsp?dateFrom="+fromDay+"-"+(fromMonth+1)+"-"+fromYear+
								"&dateTo="+toDay+"-"+(toMonth+1)+"-"+toYear+"#activeOrders";
					});
						var dates2 = $("#avgDateChooserFrom, #avgDateChooserTo").datepicker({
							defaultDate: "+1w",
							changeMonth: true,
							numberOfMonths: 1,
							onSelect: function( selectedDate ) {
								var option= this.id == "avgDateChooserFrom" ? "minDate" : "maxDate",
									instance = $( this ).data( "datepicker" ),
									date = $.datepicker.parseDate(
										instance.settings.dateFormat ||
										$.datepicker._defaults.dateFormat,
										selectedDate, instance.settings );
								dates2.not( this ).datepicker( "option", option, date );
								
							}
						});
					$("#search_2").click(function (){
						
						var fromDay = $("#avgDateChooserFrom").datepicker("getDate").getDate();
						var fromMonth = $("#avgDateChooserFrom").datepicker("getDate").getMonth();
						var fromYear = $("#avgDateChooserFrom").datepicker("getDate").getFullYear();
						
						window.location.href = "statistics.jsp?dateFrom="+fromDay+"-"+(fromMonth+1)+"-"+fromYear+
								"&dateTo="+fromDay+"-"+(fromMonth+1)+"-"+(fromYear+1)+"#avgTime";
					});
					var dates3 = $("#totalDateChooserFrom, #totalDateChooserTo").datepicker({
						defaultDate: "+1w",
						changeMonth: true,
						numberOfMonths: 1,
						onSelect: function( selectedDate ) {
							var option = this.id == "totalDateChooserFrom" ? "minDate" : "maxDate",
								instance = $( this ).data( "datepicker" ),
								date = $.datepicker.parseDate(
									instance.settings.dateFormat ||
									$.datepicker._defaults.dateFormat,
									selectedDate, instance.settings );
							dates3.not( this ).datepicker( "option", option, date);
							
						}
					});
					$("#search_3").click(function (){
						
						var fromDay = $("#totalDateChooserFrom").datepicker("getDate").getDate();
						var fromMonth = $("#totalDateChooserFrom").datepicker("getDate").getMonth();
						var fromYear = $("#totalDateChooserFrom").datepicker("getDate").getFullYear();
						var toDay = $("#totalDateChooserTo").datepicker("getDate").getDate();
						var toMonth = $("#totalDateChooserTo").datepicker("getDate").getMonth();
						var toYear = $("#totalDateChooserTo").datepicker("getDate").getFullYear();
						
						window.location.href = "statistics.jsp?dateFrom="+fromDay+"-"+(fromMonth+1)+"-"+fromYear+
								"&dateTo="+toDay+"-"+(toMonth+1)+"-"+toYear+"#totalOrders";
					});
					
					var dates4 = $("#totalPriotityDateChooserFrom, #totalPriotityDateChooserTo").datepicker({
						defaultDate: "+1w",
						changeMonth: true,
						numberOfMonths: 1,
						onSelect: function( selectedDate ) {
							var option = this.id == "totalPriotityDateChooserFrom" ? "minDate" : "maxDate",
								instance = $( this ).data( "datepicker" ),
								date = $.datepicker.parseDate(
									instance.settings.dateFormat ||
									$.datepicker._defaults.dateFormat,
									selectedDate, instance.settings );
							dates4.not( this ).datepicker( "option", option, date);
							
						}
					});
					
					$("#search_4").click(function (){
						
						var fromDay = $("#totalPriotityDateChooserFrom").datepicker("getDate").getDate();
						var fromMonth = $("#totalPriotityDateChooserFrom").datepicker("getDate").getMonth();
						var fromYear = $("#totalPriotityDateChooserFrom").datepicker("getDate").getFullYear();
						var toDay = $("#totalPriotityDateChooserTo").datepicker("getDate").getDate();
						var toMonth = $("#totalPriotityDateChooserTo").datepicker("getDate").getMonth();
						var toYear = $("#totalPriotityDateChooserTo").datepicker("getDate").getFullYear();
						
						window.location.href = "statistics.jsp?dateFrom="+fromDay+"-"+(fromMonth+1)+"-"+fromYear+
								"&dateTo="+toDay+"-"+(toMonth+1)+"-"+toYear+"#totalOrdersPriority";
					});
					
					
					$.fn.jPicker.defaults.images.clientPath='../images/';
					$("#myform2").submit(function() {
						addItemsToForm();
					}); 
					$.address.history(false).strict(false).change(function(event){																	
						var tab = event.value;									
						(tab=='board' || tab=='') ? visiableMain('board') : hiddenMain('board');
						(tab=='activeOrders') ? visiableMain('activeOrders') : hiddenMain('activeOrders');
						(tab=='avgTime') ? visiableMain('avgTime') : hiddenMain('avgTime');
						(tab=='totalOrders') ? visiableMain('totalOrders') : hiddenMain('totalOrders');
						(tab=='totalOrdersPriority') ? visiableMain('totalOrdersPriority') : hiddenMain('totalOrdersPriority');
						(tab=='adCount') ? visiableMain('adCount') : hiddenMain('adCount');

						
   					}).history(true);
					$("#logOut").click(function(){
							$.post("logOutBusiness",function(){$(location).attr('href','home.jsp');});
					});
					$("#profile").click(function(){
						$.post("myProfileBusiness",function(){$(location).attr('href','myProfileBusiness2.jsp');});
				    });
					$("#closeBox").click(function(){
							$(this).parent().slideUp(500);
					});
					$("#newOrder").click(function(){
							$("#messageBox").slideToggle(500);
					});
					$("#newOrderButton").click(function(){
							$("#messageBox").slideToggle(500);
					});
					// Example 1.2: Sortable and connectable lists
					$('#example-1-2 .sortable-list').sortable({
						connectWith: '#example-1-2 .sortable-list'
					});

					  $(".content").hide();
					  $(".arrow").click(function()
					  {
						  changeDivContent("statusDiv",$(this).parent());
					  });
					  $(".message").click(function()
					  {
						  changeDivContent("messageDiv",$(this).parent());
						  });
					  $(".cogWheel").click(function()
					  {
						  changeDivContent("settingDiv",$(this).parent());				
					  });
					  
					  $(".exit").click(function(){
						  	$(this).parent().hide(500);
					  });
					  $("#terminal").click(function(){
						  window.location.href = "allOrders.jsp";
					  });
					  $(".statusChange").click(function ()
					 {
						  elem = $(this).parent().parent().parent().find("#orderId").val();
							  $.post("changeStatusBusiness", {orderID: elem,newStatus:$(this).val()}, function() {
								  $(location).attr('href','allOrders.jsp');
								  changeStatus($(this).html('il'),$(this).parent().parent());
								  },"html");
							  
							  
					 });
					  $('#pickColor1').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getBackground()%>' })
			           				}
				          
					});
					$('#pickColor2').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getSecBackground()%>' })
			           				}
				          
					});
					$('#pickColor3').jPicker({
				          window:{
				            expandable: true,
				            position:	{x: 'screenCenter', y: '-450'},
							liveUpdate: true},
			 		   	color:
			           				{alphaSupport: true,
			             			 	active: new $.jPicker.Color({ ahex: '<%= business.getBorderColor()%>' })
			           				}
				          
					});
					$("#sortable1").sortable();
					order = $("#sortable1").sortable('serialize',{attribute:'name'});
					$("#sortable1").disableSelection();
					$("#sortable2").sortable();
					order = $("#sortable2").sortable('serialize',{attribute:'name'});
					$("#sortable2").disableSelection();
					
					var background = ['f5f5f5','ffaaaa','bfffaa','ffffff'];
					var messageBG = ['6699cc','ff5656', 'aced21', '8d967b'];
					var border = ['3366cc','ff0000', '0b8205', '000000'];
					
					 $("#pageColorSelect").change(function(){
							var pos = $(this).val();
							$.jPicker.List[0].color.active.val('hex', background[pos], this);
							$.jPicker.List[1].color.active.val('hex', messageBG[pos], this);
							$.jPicker.List[2].color.active.val('hex', border[pos], this);

							
						});
					 $("#preview").click(function(){
					 	window.open('http://syncahore.appspot.com/preview.jsp?background='+$.jPicker.List[0].color.active.val("hex")+'&messageBG='+$.jPicker.List[1].color.active.val('hex')+'&border='+$.jPicker.List[2].color.active.val('hex'));
					 });
					  changeStatus = function(val,elem){
						  
					  }
					  changeDivContent = function(divName,elem){
						//  confirm(divName);
							if(divName=='settingDiv'){
								openDiv('settingDiv',elem)
						//		confirm("if");
					  		}
							else{
								
								closeDiv('settingDiv',elem);
							//	confirm("else");
							}
						//	confirm("xfx");
					  		(divName=='messageDiv') ? openDiv('messageDiv',elem) : closeDiv('messageDiv',elem);
					  		
							(divName=='statusDiv') ? openDiv('statusDiv',elem) : closeDiv('statusDiv',elem);
					  }
					  
					  openDiv = function(divName1,elem){
						  
						  elem.find('#'+divName1).attr('class','content');
						//  confirm("1");
						  //if(elem.find('#'+divName1).is(':not(:visiable)')){  
						//	  confirm("3");
							  elem.find('#'+divName1).slideToggle(500);	  
					//	  }
						//  confirm("2");
						  return true;
					  }
					  
					  closeDiv = function(divName,elem){
						  elem.find('#'+divName).attr('class','hiddenMain');
					//	  if(elem.find('#'+divName).is(':visiable')){
							  elem.find('#'+divName).hide(500);	  
					//	  }
						  return true;
					  }
					
				}
			);
			var getSortOrder = function(){
				var x='';
				$.each($("#sortable").sortable('toArray'), function(index,value){
						x=x+'index '+index+': '+value+'\n';
					});
				return x;
			 }
			var addItemsToForm = function(){
				/* $.each($("#sortable1").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','list_'+index,value);
					}); */
				$("#sortable1 li").each(function(index,value){
					addHiddenInput('#myform2','list_'+index,this.getAttribute('value'));
				});
				$("#sortable2 li").each(function(index,value){
					addHiddenInput('#myform2','message_'+index,this.getAttribute('value'));
				});
				/* $.each($("#sortable2").sortable('toArray'), function(index,value){
					addHiddenInput('#myform2','message_'+index,value);
				}); */
				addHiddenInput('#myform2','background','#'+$.jPicker.List[0].color.active.val("hex"));
				addHiddenInput('#myform2','secBackground','#'+$.jPicker.List[1].color.active.val("hex"));
				addHiddenInput('#myform2','borderColor','#'+$.jPicker.List[2].color.active.val("hex"));
				
		
			 } 
			 var addHiddenInput = function(formName,attName,attVal){
				 $('<input />').attr('type', 'hidden')
		            .attr('name', attName)
		            .attr('value', attVal)
		            .appendTo(formName);
			 }
			 var removeItem = function(x){
				 //alert("asdasd "+x);
				 $(x).remove();
				 
			 }
			 var liIndex=0;
			 var addItem = function(identifier,sortable){
				 if($("#"+identifier).val()!=''){
				 	$("#"+sortable).append('<li id="list_'+sortable+liIndex+'" value="list_'+$("#"+identifier).val().replace(/ /g,'@')+'">'+$("#"+identifier).val()+'   <a href="" onclick="removeItem(list_'+sortable+liIndex+'); return false;">     remove</a></li>');
				 	$("#"+identifier).val('');
				 }
			 }
			var visiableMain = function(tab){
				
				$('#main_content #'+tab).attr('class','');
				$('#menu #'+tab).attr('class','choosenButton');
			}
			
			var hiddenMain = function(tab){
				
				$("#main_content #"+tab).attr('class','hiddenMain');
				$('#menu #'+tab).attr('class','');
			}
	
				


			


		</script>
        
	</head>

	<body>
<div id="container">
		
		<div id="headerLogedIn">

        <div class="menu_nav_logedIn menu_nav_logedIn2">
            <ul id="menu">
            	<li id="terminal"><%=lang.getTERMINAL_BUTTON() %></li>
                <li id="profile"><%=lang.getMT_PROFILE_BUTTON() %></li>
                <li id="logOut"><%=lang.getLOG_OUT_BUTTON() %></li>
            </ul>
        </div>	
        	
		</div>

		<div id="left_sidebar">
			<img src="../showImage?imageKey=<%=business.getUserName() %>"  width="150" />
            <div class="side_buttons">
                <ul>
                	<a href="statistics.jsp#board"><li><%=lang.getBOARD_BUTTON() %></li></a>
                    <a href="statistics.jsp#activeOrders"><li><%=lang.getACTIVE_ORDERS_BUTTON() %></li></a>
                    <a href="statistics.jsp#avgTime"><li><%=lang.getAVG_TIME_BUTTON() %></li></a>
                    <a href="statistics.jsp#totalOrders"><li><%=lang.getTOTAL_ORDERS_BUTTON() %></li></a>
                    <a href="statistics.jsp#totalOrdersPriority"><li><%=lang.getTOTAL_ORDERS_PRIORITY_BUTTON() %></li></a>
                    <a href="statistics.jsp#adCount"><li><%=lang.getADV_BUTTON() %></li></a>
                    
                </ul>
        	</div>
		</div>
			
<div id="main_content">
 <div style="padding-left: 43%; font-size: 20px; font-weight: bold;  "><%=lang.getSTATISTIC_LABEL() %></div>
 <center>
 

<br />

<div id="board">

<table cellspacing="20"> 
	<tr>
 	<%
 	boolean flag1 = false;
 	for(String status : statuses){
 		if(statusHash.get(status)!=0){
 			flag1 = true;
 			break;
 		}
 			
 	}
 	if (flag1) {%>
	 	<td>
 		<div id="chart_div_1" class="chart_div"></div>
 		</td>
	<%}else { %>
	<%}%>
	<td>
	<div id="twoColumnChart_div_1" style="width: 500px; height: 200px;"></div>
	</td>
</tr>
<tr>
	<td>
	<div id='table_div_1' dir="<%=lang.getDirection()%>"></div>
	</td>
	<td>
	<div id="twoColumnPriorityChart_div_1" style="width: 500px; height: 200px;"></div>
	</td>
</tr>
</table>
 </div>



 <div id="activeOrders" dir="<%=lang.getDirection() %>">
 	<%
//	boolean flag1 = false;
// 	for(String status : statuses){
// 		if(statusHash.get(status)!=0){
// 			flag1 = true;
// 			break;
// 		}
 			
 //	}
 	if (flag1) {%>
 		<div id="chart_div_2" class="chart_div"></div>
	<%}else { %>
	<br/><br/><br/><br/>
	There are no order in this time frame.
	<br/><br/><br/><br/>
	<%}%>
	
<label> <%=lang.getFROM_STATISTIC_LABEL() %> </label>
<input type="text" id="dateChooserFrom" name = "dateChooserFrom"/>
<label> <%=lang.getTO_STATISTIC_LABEL() %> </label>
<input type="text" id="dateChooserTo" name="dateChooserTo"/>
<button id="search_1"><%=lang.getSEARCH_BUTTON() %> </button>
 </div>



<div id="avgTime" dir="<%=lang.getDirection() %>">
<br/><br/>
<label> <%=lang.getFROM_STATISTIC_LABEL() %> </label>
<input type="text" id="avgDateChooserFrom" name = "dateChooserFrom"/>
<button id="search_2"><%=lang.getSEARCH_BUTTON() %></button>
<br/><br/>
<div id='table_div_2' style="width:80%;" dir="<%=lang.getDirection()%>"></div>
<!-- label> asdsafsada: </label-->

<!-- >label> to: </label>
<input type="text" id="avgDateChooserTo" name="dateChooserTo"/-->
<%j = 1;
for(String status : statuses){%>
<br><br>
<div id="columnChart_div_<%=j%>" style="width: 900px; height: 500px;" ></div>
<%j++;
} %>

</div>



<div id="totalOrders" div="<%=lang.getDirection() %>">
<!-- div id='table_div'></div-->
<label> <%=lang.getFROM_STATISTIC_LABEL() %> </label>
<input type="text" id="totalDateChooserFrom" name = "totalDateChooserFrom"/>
<label> <%=lang.getTO_STATISTIC_LABEL() %> </label>
<input type="text" id="totalDateChooserTo" name="totalDateChooserTo"/>
<button id="search_3"><%=lang.getSEARCH_BUTTON() %></button>
<br><br>

<div id="twoColumnChart_div_2" style="width: 900px; height: 500px;"></div>
</div>



<div id="totalOrdersPriority" dir="<%=lang.getDirection() %>">

<!-- div id='table_div'></div-->
<label><%=lang.getFROM_STATISTIC_LABEL() %></label>
<input type="text" id="totalPriotityDateChooserFrom" name = "totalPriotityDateChooserFrom"/>
<label> <%=lang.getTO_STATISTIC_LABEL() %> </label>
<input type="text" id="totalPriotityDateChooserTo" name="totalPriotityDateChooserTo"/>
<button id="search_4"><%=lang.getSEARCH_BUTTON() %></button>
<br><br>

<div id="twoColumnPriorityChart_div_2" style="width: 900px; height: 500px;"></div>
</div>

<div id="adCount">
 <table border="1" align="center" dir="<%=lang.getDirection()%>">
 <tr align="center">
  <td><%=lang.getADS_LABEL() %></td>
  <td><%=lang.getAPPEAR_COUNT_LABEL() %></td>
  <td><%=lang.getCLICKED_COUNT_LABEL() %></td>
 </tr>
 <%
 List<Ad> adList = Controller.getInstance().getAdsCount(business.getUserName());
 for(int z=0;z<adList.size();z++){
 %>
  <tr align="center">
   <td><img src="/showImage?imageKey=<%=bizName %>&id=<%=z %>"/></td>
   <td><%=adList.get(z).getAppeared() %></td>
   <td><%=adList.get(z).getClicked() %></td>
  </tr>
 <%} %>
 </table>
</div>
 </center>

	<div class="clearer">&nbsp;</div>
</div>	


		<div id="footer">
	<a href="statistics.jsp?lang=he"><img src="../images/hebrew.gif" width="30px" style="float: left; margin-top: 0.5%; margin-left: 0.5%;"/></a>
	<a href="statistics.jsp?lang=en"><img src="../images/english.gif" width="30px" style="float: left; margin-top: 0.5%;margin-left: 0.5%;"/></a>

<center>
		<p><%=lang.getCOPY_RIGHT_LABEL()%> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;               
			<a href="home.jsp"><%=lang.getHOME_BUTTON()%></a> &nbsp;&nbsp;| &nbsp;&nbsp;
			<a href="home.jsp#customers"><%=lang.getCONTACT_BUTTON()%></a> &nbsp;&nbsp;|&nbsp;&nbsp;
			<a href="home.jsp?#about"><%=lang.getABOUT_BUTTON()%></a>
		</p>
		</center>
	</div>
</div>


	</body>

</html>
